<template>
  <Tel
    :attributes="attributes"
    :events="events"
  >
    <template #com>
      <UploadVideo v-model="val" :size="5"/>
      <el-divider/>
      <div>
        <el-button type="danger" @click="showVideo">视频预览</el-button>
      </div>
    </template>
    {{ code }}
  </Tel>
  <TelAttris
    title="VideoPlayer"
    :data="data"
  />
  <VideoPlayer v-model="show" :url="url"/>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import { VideoPlayer, UploadVideo } from '@/components/UploadMedia'
import { TelAttris } from './template'
import Tel from './template/Tel.vue'
import { Attribute, Event } from './type'
export default defineComponent({
  name: 'ExampleAddrSelector',
  components: {
    Tel,
    UploadVideo,
    VideoPlayer,
    TelAttris
  },
  setup() {
    const val = reactive([])
    const show = ref(false)
    const data = reactive([
      {
        argu: 'v-model',
        instruction: '双向绑定',
        type: 'Boolean',
        option: '-',
        default: 'false'
      },
      {
        argu: 'url',
        instruction: '播放的url',
        type: 'String',
        option: '-',
        default: '-'
      },
      {
        argu: 'width',
        instruction: '容器宽度',
        type: 'String',
        option: '-',
        default: '50vw'
      },
      {
        argu: 'height',
        instruction: '容器高度',
        type: 'String',
        option: '-',
        default: '50vh'
      }
    ])
    const url = ref('http://banzhuren-assistant.oss-cn-beijing.aliyuncs.com/dev/homeworkTodo/19440642/20210331/116437220994816.mp4')
    const attributes: Array<Attribute> = [
      {
        argu: 'v-model',
        instruction: '双向绑定',
        type: 'Array/String',
        option: '-',
        default: '-'
      },
      {
        argu: 'max',
        instruction: '最大个数',
        type: 'Number',
        option: '-',
        default: '9'
      },
      {
        argu: 'size',
        instruction: '视频上传大小',
        type: 'Number',
        option: '-',
        default: '50M'
      },
      {
        argu: 'disable',
        instruction: '是否禁用',
        type: 'Boolean',
        option: 'true/false',
        default: 'false'
      },
      {
        argu: 'preview',
        instruction: '预览模式',
        type: 'Boolean',
        option: 'true/false',
        default: 'false'
      },
      {
        argu: 'hidePreview',
        instruction: '隐藏默认显示',
        type: 'Boolean',
        option: 'true/false',
        default: 'false'
      }
    ]
    const events: Array<Event> = [
      {
        name: 'change',
        instruction: '地址选择改变时触发',
        argu: 'Array/String'
      }
    ]
    const code:string = `
    <UploadVideo v-model="val" :size="5"/>
    <VideoPlayer v-model="show" :url="url"/>`
    return {
      val,
      attributes,
      events,
      code,
      show,
      url,
      data,
      change: function(data) {
        // eslint-disable-next-line no-console
        console.log('响应数据', data)
      },
      showVideo: function() {
        show.value = true
      }
    }
  }
})
</script>
